
import Taro, { Component } from '@tarojs/taro'
import {View, Button, Image, Form, Input, Text} from '@tarojs/components'
import { observer, inject } from '@tarojs/mobx'
import { userInfoInterface,
  navigateTo,
  articleType,
  showToast, navigateBack, updateUserInfo } from '../../utils/common'
import SmsCode from "../../components/SmsCode";

import './login.scss'

import {IStoreProps} from '../../store/Stores'
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Login extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    userInfo: {} as userInfoInterface,
    smsCode:'',
    phoneNumber: '',
    codeState: 0, // 0是绑定， 1是修改
  }

  componentWillMount () {
  }

  link = (url: string = '/pages/index/index'): void => {
    navigateTo(url)
  }

  getCode(phoneNumber: string, code: string) {
    this.setState({ phoneNumber, smsCode: code })
  }

  submit() {
    let { smsCode, phoneNumber, codeState } = this.state
    if(!phoneNumber || !smsCode) { showToast('请填写手机号或手机验证码~'); return }
    let { userStore } = this.props.stores
    userStore.setUserPhoneAsync({
      form: { smsCode, phoneNumber, codeState },
      callback: () => {
        if(codeState === 0) {
          showToast('手机绑定成功~')
        }else {
          showToast('手机修改成功~')
        }
        // 更新用户缓存信息
        updateUserInfo('userPhone', phoneNumber)
        setTimeout(() => { navigateBack() }, 2000)
      }
    })
  }

  render () {
    return (
      <View className='login'>
          <View className='page-name'>请绑定手机号</View>

        <View className='form-wrap content-30'>
          <Form onSubmit={this.submit.bind(this)}>
            <View className='form-body'>
              <SmsCode filedName='手机号码' onGetCode={this.getCode.bind(this)} />
            </View>

            <Button formType='submit' className='login-btn' >
              <Image className='login-btn__icon' src={require('../../assets/img/icon_06.png')} />
            </Button>
          </Form>
        </View>

        <View className='service-read'>登录即表示您已阅读并同意
          <Text className='color-theme' onClick={this.link.bind(this, '/pages/mine/helpDetail?id='+articleType.userServiceAg)}>《联合养殖服务协议》</Text>
        {/*  <Text className='color-theme' onClick={this.link.bind(this, '/pages/mine/helpDetail?id='+articleType.userPrivacy)}>《隐私政策》</Text>*/}
        </View>
      </View>
    )
  }
}

export default Login
